<template>
	<view class="TUI-chat">
		<view class="TUI-chat-button" @click="openChat">打开 1v1 聊天</view>
		<view class="TUI-chat-button" @click="createGroup">创建群</view>
		<view class="TUI-chat-button" @click="openGroupChat">打开群聊</view>
	</view>
</template>
<script>
	// #ifdef MP-WEIXIN
	import {
		TUIChatKit,
		genTestUserSig
	} from "@/TUIKit/index.ts";
	import {
		vueVersion
	} from "@/TUIKit/adapter-vue";
	import {
		TUILogin
	} from "@tencentcloud/tui-core";
	// TUIChatKit 初始化
	TUIChatKit.init();
	uni.$chat_userSig = genTestUserSig({
		userID: uni.$chat_userID,
		SDKAppID: uni.$chat_SDKAppID,
		secretKey: uni.$chat_secretKey
	}).userSig;
	// #endif

	import {
		TUIConversationService,
		TUIGroupService,
		TUIChatEngine
	} from "@tencentcloud/chat-uikit-engine";
	export default {
		components: {},
		data() {
			return {
				userID: "1000002", // 请填写对端 userID 参考步骤6
				groupID: "", // 通过调用 API createGroup 可获取 groupID，具体可参考：https://web.sdk.qcloud.com/im/doc/chat-engine/ITUIGroupService.html#createGroup
			};
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			this.TUILogin();
			// #endif
		},
		methods: {
			// 打开 1v1 聊天
			openChat() {
				// 切换会话进入聊天
				const conversationID = `C2C${this.userID}`;
				// #ifdef APP-PLUS || H5
				TUIConversationService.switchConversation(conversationID);
				// #endif
				uni.navigateTo({
					url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
				});
			},
			// 打开群聊
			openGroupChat() {
				const conversationID = `GROUP${this.groupID}`;
				// #ifdef APP-PLUS || H5
				TUIConversationService.switchConversation(conversationID);
				// #endif
				uni.navigateTo({
					url: `/TUIKit/components/TUIChat/index?conversationID=${conversationID}`,
				});
			},
			TUILogin() {
				TUILogin.login({
					SDKAppID: uni.$chat_SDKAppID,
					userID: uni.$chat_userID,
					// UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信息加密后得到的密文。
					// 该方法仅适合本地跑通 Demo 和功能调试，详情请参见 https://cloud.tencent.com/document/product/269/32688
					userSig: uni.$chat_userSig,
					// 如果您需要发送图片、语音、视频、文件等富媒体消息，请设置为 true
					useUploadPlugin: true,
					// 本地审核可识别、处理不安全、不适宜的内容，为您的产品体验和业务安全保驾护航
					// 此功能为增值服务，请参考：https://cloud.tencent.com/document/product/269/79139
					// 如果您已购买内容审核服务，开启此功能请设置为 true
					useProfanityFilterPlugin: false,
					framework: `vue${vueVersion}` // 当前开发使用框架 vue2 / vue3
				}).then(() => {
					uni.showToast({
						title: "login success"
					});
				});
			},
			createGroup() {
				let promise = TUIGroupService.createGroup({
					type: TUIChatEngine.TYPES.GRP_WORK,
					name: 'newGroup',
					memberList: [{
						userID: '1000002',
						// 群成员维度的自定义字段，默认情况是没有的，需要开通，详情请参阅自定义字段
						memberCustomField: [{
							key: 'group_member_test',
							value: 'test'
						}]
					}, {
						userID: 'user2'
					}] // 如果填写了 memberList，则必须填写 userID
				});
				promise.catch((error) => {
					// 调用异常时业务侧可以通过 promise.catch 捕获异常进行错误处理
				});
			}

		},
	};
</script>
<style lang="scss" scoped>
	.TUI-chat {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;

		&-button {
			width: 180px;
			padding: 10px 40px;
			background-color: #006eff;
			color: #ffffff;
			font-size: 16px;
			margin-top: 65px;
			border-radius: 30px;
			text-align: center;
		}
	}
</style>